<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>订单结算页 - 乐购</title>
    <link rel="icon" href="images/common/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="styles/reset.css" type="text/css">
    <link rel="stylesheet" href="styles/common.css" type="text/css">
    <link rel="stylesheet" href="styles/pay.css" type="text/css">
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css">
</head>
<body>
<!-- 顶部 -->
<div class="topTip fz14 w3 lh40 fzCo">
    <div class="container">
        乐购 www.legou.com
        <span class="right">
            欢迎光临乐购 请&nbsp;
            <a href="../login.html">登录 </a>|
            <a href="register.html"> 注册</a>
        </span>
    </div>
</div>
<!-- 页头 -->
<header class="headFir">
    <div class="container">
        <!-- logo -->
        <a href="index.html"><div class="logo left" title="乐购首页"></div></a>
        <div class="topNav por left">
            <form action="#" method="get">
                <!-- 搜索框 -->
                <label class="por">
                    <input type="text" placeholder="请输入搜索的商品名" name="wd">
                    <button type="submit">
                        <img src="images/index/search.png" alt="搜索" title="搜索">
                    </button>
                </label>
                <!-- 购物车 -->
                <button id="shopCar" class="maCo">
                    <img src="images/index/shopCar_01.png" alt="购物车">
                    购物车
                    <i class="fz14 fzCo maBg">0</i>
                </button>
                <button id="order">我的订单</button>
            </form>
            <!-- 导航 -->
            <nav>
                <a href="" class="ml0">图书</a>
                <a href="">电子书</a>
                <a href="">原创文学</a>
                <a href="">服装</a>
                <a href="">运动户外</a>
                <a href="">孕婴童</a>
                <a href="">家居</a>
                <a href="">创意文具</a>
                <a href="">地方特产</a>
                <a href="">海外购</a>
                <a href="">电器城</a>
            </nav>
        </div>
    </div>
</header>
<!-- 主体内容 -->
<div class="wrapper">
    <div class="wrap por">
        <!-- 订单流程 -->
        <div class="flow right clearfix por">
            <span>确认订单</span>
            <span>支付货款</span>
            <span>确认货款</span>
            <span>评价商品</span>
            <span><b class="now">1</b></span>
            <span><b>2</b></span>
            <span><b>3</b></span>
            <span><b>4</b></span>
            <div class="line"></div>
        </div>
        <!-- 一、确认订单 -->
        <div class="order orderFir left" style="display: block">
            <!-- 收货地址 -->
            <div class="address mic clearfix">
                <div class="addTitle fz18 fwb">
                    <strong>收货地址</strong>
                    <i class="layui-icon layui-icon-down fz18 lh15"></i>
                </div>
                <!-- 地址列表 -->
                <ul class="addList fz16">
                    <li class="addBorder">
                        <span>耙耳朵<i>默认</i></span>
                        <b>17787490321</b>
                        <address>四川省 成都市 高新区 府城大道<br/>西段399号 天府新谷 1栋6层</address>
                        <i>修改</i>
                    </li>
                    <li>
                        <span>王宝器</span>
                        <b>19849023321</b>
                        <address>四川省 绵阳市 安州区 花荄镇<br/> 启明星大道12号</address>
                        <i>修改</i>
                    </li>
                    <li>
                        <span>棒棒娃</span>
                        <b>13790234521</b>
                        <address>四川省 广安市 武胜县 沿口镇<br/> 一江山水 3单元1栋31楼</address>
                        <i>修改</i>
                    </li>
                    <li>
                        <span>干豇豆</span>
                        <b>19023098764</b>
                        <address>四川省 攀枝花市 东区 瓜子坪街道 <br/>阳光馨苑 19栋2-6</address>
                        <i>修改</i>
                    </li>
                    <li>
                        <span>铁公鸡</span>
                        <b>19812091570</b>
                        <address>四川省 成都市 郫都区 宇众曼城<br/> 1栋2单元21楼2-5</address>
                        <i>修改</i>
                    </li>
                    <li>
                        <span>张麻子</span>
                        <b>15623090251</b>
                        <address>广东省 佛山市 禅城区 龙江镇<br/> 长路直街群星里18号</address>
                        <i>修改</i>
                    </li>
                </ul>
            </div>
            <!-- 确认订单 -->
            <div class="confirmOrd fz18">
                <strong>确认订单</strong>
                <!-- 店铺信息 -->
                <div class="store fz14">
                    <b>木果果木官方旗舰店</b>
                    <span>联系店家</span>
                    <i>满2件包邮</i>
                </div>
                <!-- 商品信息 -->
                <div class="wares">
                    <img src="images/order/ware_01.jpg" alt="">
                    <div class="waresInfo">
                        木果果木2016秋装新品韩范简约宽松中长款纯棉长袖衬衫
                        <div class="tips">
                            <span>新品</span>
                            <span>包邮</span>
                        </div>
                    </div>
                    <div class="waresDesc fz14 lh24 mic">
                        颜色：魅夜黑<br/>
                        尺寸：M
                    </div>
                    <div class="waresPrice fz16">
                        <i><span>￥169.00</span></i>
                        <b>VIP积分 <span>100</span></b>
                        <i>配送费：<span>0.00</span></i>
                        <i>运费险：<span>￥3.00</span></i>
                    </div>
                    <div class="waresNum fz26">
                        <label>
                            <button>-</button>
                            <input type="text" value="1">
                            <button>+</button>
                        </label>
                    </div>
                    <div class="waresTotal">
                        小计：<span>￥252</span>
                    </div>
                </div>
                <label class="message fz16">
                    给卖家留言：<input type="text">
                </label>
            </div>
            <!-- 提交订单 -->
            <div class="subOrder fz18 clearfix">
                <dl>
                    <dt>
                        <i>实付款：</i>
                        <span>￥252</span>
                    </dt>
                    <dt>
                        <i>寄送至：</i>
                        <address>四川省 成都市 高新区 府城大道 西段399号 天府新谷1栋6层</address>
                    </dt>
                    <dt>
                        <i>收货人：</i>
                        <b>耙耳朵 17787490321</b>
                    </dt>
                    <dt>
                        <label>
                            <input type="checkbox">优惠券
                            <input type="checkbox">找人代付
                            <input type="checkbox">匿名购买
                        </label>
                    </dt>
                    <dt>
                        <input type="submit" value="提交订单" id="subOrder" class="payBtn">
                    </dt>
                </dl>
            </div>
        </div>
        <!-- 二、支付付款 -->
        <div class="order orderSec left">
            <!-- 收货地址 -->
            <div class="payWay clearfix">
                <strong class="fz18">支付方式</strong>
                <form action="#" class="layui-form payList">
                    <label class="choose">
                        <input type="radio" name="pay" checked>
                        <img src="images/order/pay_01.jpg" alt="">
                    </label>
                    <label>
                        <input type="radio" name="pay">
                        <img src="images/order/pay_02.jpg" alt="">
                    </label>
                    <label>
                        <input type="radio" name="pay">
                        <img src="images/order/pay_03.jpg" alt="">
                    </label>
                    <label>
                        <input type="radio" name="pay">
                        <img src="images/order/pay_04.jpg" alt="">
                    </label>
                    <label>
                        更多&emsp;>>
                    </label>
                </form>
            </div>
            <!-- 提交订单 -->
            <div class="subOrder fz18">
                <dl>
                    <dt>
                        <i>应付总额：</i>
                        <span>￥252</span>
                    </dt>
                    <dt>
                        <i>寄送至：</i>
                        <address></address>
                    </dt>
                    <dt>
                        <i>收货人：</i>
                        <b></b>
                    </dt>
                    <dt>
                        <input type="submit" value="确认支付" id="surePay" class="payBtn">
                    </dt>
                </dl>
            </div>
        </div>
        <!-- 三、确认收货 -->
        <div class="order orderThi left">
            <!-- 订单信息 -->
            <strong class="fz18">我已收到货,同意付款</strong>
            <!-- 商品信息 -->
            <div class="orderTab clearfix ">
                <strong class="fz18">订单信息</strong>
                <table>
                    <tr>
                        <td>宝贝</td>
                        <td>状态</td>
                        <td>单价（元）</td>
                        <td>数量</td>
                        <td>优惠</td>
                        <td>商品总价</td>
                        <td>运费</td>
                    </tr>
                    <tr>
                        <td>
                            <img src="images/order/ware_01.jpg" alt="">
                            <i>木果果木2016秋装新品韩范简约宽松中长款宽松短款</i>
                            <b>颜色：<span>魅夜黑</span> &emsp;尺寸：<span>M</span></b>
                        </td>
                        <td>出库中</td>
                        <td>259.00</td>
                        <td>1</td>
                        <td>满300减20<br/> 两件包邮</td>
                        <td>259.00</td>
                        <td>快递:0.00</td>
                    </tr>
                </table>
                <strong class="fz18 right">实付款：<span>11</span></strong>
            </div>
            <!-- 提交订单 -->
            <div class="confirmRec fz16">
                <span><strong>订单编号：</strong>18015987637263989</span>
                <span><strong>支付宝交易号：</strong>202001111119283974879989</span>
                <span><strong>卖家昵称：</strong>三七</span>
                <span></span>
                <span>2020-01-11 14:11:40</span>
            </div>
            <input type="submit" value="确认收货" id="sureGet" class="subEvl">
        </div>
        <!-- 四、评价商品 -->
        <div class="order orderFou left">
            <!-- 订单信息 -->
            <strong class="fz18">商品评价</strong>
            <!-- 商品信息 -->
            <div class="evaluate clearfix por">
                <div class="imgInfo left">
                    <img src="images/order/ware_01.jpg" alt="">
                    <span>木果果木2016秋装新品韩范简约宽松中长款宽松短款</span>
                </div>
                <form action="#" method="post">
                    <label>
                        <textarea placeholder="亲，评价无法修改，请验货后对商品和购物感受作出评价 ......"></textarea>
                        <button>商品晒图</button>
                        <span class="right">
                            <input type="radio" name="evl">公开
                            <input type="radio" name="evl">匿名
                        </span>
                    </label>
                </form>
                <dl>
                    <dt>
                        <span>宝贝与描述是否相符</span>
                        <div id="test1"></div>
                    </dt>
                    <dt>
                        <span>卖家的服务态度</span>
                        <div id="test2"></div>
                    </dt>
                    <dt>
                        <span>物流服务的质量</span>
                        <div id="test3"></div>
                    </dt>
                </dl>
            </div>
            <!-- 提交订单 -->
            <input type="submit" value="提交评价" id="subEva" class="subEvl">
        </div>
    </div>
</div>
<!-- 页脚 -->
<footer>
    <!-- 站点地图 -->
    <div class="container">
        <ul class="siteSer fz18 lh24">
            <li>
                <img src="images/index/site_01.jpg" alt="">
                <strong>正品保障<br/><span>正品行货 放心选购</span></strong>
            </li>
            <li>
                <img src="images/index/site_02.jpg" alt="">
                <strong>满86包邮<br/><span>满86元 免运费</span></strong>
            </li>
            <li>
                <img src="images/index/site_03.jpg" alt="">
                <strong>售后无忧<br/><span>7天无理由退货</span></strong>
            </li>
            <li>
                <img src="images/index/site_04.jpg" alt="">
                <strong>准时送达<br/><span>收货时间由你做主</span></strong>
            </li>
        </ul>
        <ul class="siteMap clearfix">
            <li>
                <a href="">新手入门</a>
                <a href="">购物流程</a>
                <a href="">会员制度</a>
                <a href="">订单查询</a>
                <a href="">服务协议及隐私说明</a>
                <a href="">网站地图</a>
            </li>
            <li>
                <a href="">支付方式</a>
                <a href="">货到付款</a>
                <a href="">网上支付</a>
                <a href="">礼品卡支付</a>
                <a href="">其它支付</a>
            </li>
            <li>
                <a href="">配送服务</a>
                <a href="">配送进度查询</a>
                <a href="">商品验货与签收</a>
            </li>
            <li>
                <a href="">相关规则</a>
                <a href="">平台规则</a>
                <a href="">退换货政策</a>
                <a href="">发票制度</a>
                <a href="">帮助中心</a>
            </li>
            <li>
                <span>App更优惠</span>
                <img src="images/index/qrCode_01.jpg" alt="">
            </li>
            <li>
                <span>加微信查订单</span>
                <img src="images/index/qrCode_02.jpg" alt="">
            </li>
        </ul>
    </div>
    <!-- 底部 -->
    <div class="record fz12 lh26">
        <p>沪ICP备XXXXXXXXX号&nbsp; | &nbsp;经营证照&nbsp; | &nbsp;互联网药品信息服务资格证(沪)-经营性-2017-0006&nbsp; | &nbsp;违法和不良信息举报电话：XXX-XXXXXXXX&nbsp; | &nbsp;沪B2-XXXXXXX
            <br/>沪公网安备 XXXXXXXXX号&nbsp; | &nbsp;友情链接&nbsp; | &nbsp;出版物经营许可证&nbsp; | &nbsp;增值电信业务经营许可证</p>
        <div class="depart">
            <a href="#"><img src="images/index/depart_01.jpg" alt=""></a>
            <a href="#"><img src="images/index/depart_02.png" alt=""></a>
            <a href="#"><img src="images/index/depart_03.png" alt=""></a>
            <a href="#"><img src="images/index/depart_04.png" alt=""></a>
            <a href="#"><img src="images/index/depart_05.png" alt=""></a>
            <a href="#"><img src="images/index/depart_06.jpg" alt=""></a>
        </div>
    </div>
</footer>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function(){});
    layui.use(['rate'], function(){
        var rate = layui.rate;
        //基础效果
        rate.render({
            elem: '#test1'
        });
        rate.render({
            elem: '#test2'
        });
        rate.render({
            elem: '#test3'
        })
    });
</script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    /*
        确认订单部分
    */
    //  隐藏多余地址
    $('.addList li:gt(3)').hide();
    // 点击显示所有地址
    $('.addTitle i').on('click',function () {
        $(this).toggleClass('upDown');
        $('.addList li:gt(3)').toggle();
    });

    //  点击选中地址
    $('.addList li').on('click',function () { 
        // 清除所有地址样式
        $('.addList li').removeClass('addBorder');
        $(this).toggleClass('addBorder');
        // 写入收货信息
        $('.subOrder dt:eq(1)').html('<i>寄送至：</i><address>' + $(this).children('address').text()) + '</address>';
        $('.subOrder dt:eq(2)').html('<i>收货人：</i><b>' + $(this).children('span').text() + ' ' + $(this).children('b').text()) + '</b>';
    });

    //  提交订单跳转至支付货款
    $('#subOrder').on('click',() => {
        // 改变流程样式
        $('.flow b').removeClass('now');
        $('.flow b:eq(0)').text('√');
        $('.flow b:eq(1)').addClass('now');

        $('.order').css('display','none');
        $('.order:eq(1)').css('display','block');
        $(window).scrollTop(0);
        // 为支付方式页面添加收货信息
        $('.subOrder span:last').html( $('.subOrder dt:eq(0) span').text());
        $('.subOrder address:last').html( $('.subOrder dt:eq(1) address').text());
        $('.subOrder b:last').html( $('.subOrder dt:eq(2) b').text());
    });

    /*
        支付方式部分
    */
    //  点击选中付款方式
    $('.payList').on('click','i',function(){
        $('.payList label').removeClass('choose');
        $(this).closest('label').addClass('choose');
    });
    //  确认支付跳转至确认货款
    $('#surePay').on('click',() => {
        // 改变流程样式
        $('.flow b').removeClass('now');
        $('.flow b:eq(1)').text('√');
        $('.flow b:eq(2)').addClass('now');

        $('.order').css('display','none');
        $('.order:eq(2)').css('display','block');
        $(window).scrollTop(0);
        // 为支付方式页面添加收货信息
        $('.orderTab strong span').html($('.subOrder dt:eq(0) span').text());
        $('.confirmRec span:eq(3)').html('<strong>收货信息：</strong>' + $('.subOrder dt:eq(1) address').text());
        nowTime();
    });

    /*
        确认货款
    */
    // 写入成交时间
    function nowTime(){
        let date = new Date();
        let years,months,days,hours,minutes,seconds,times;
        years = date.getFullYear();
        months = date.getMonth() + 1;
        days = date.getDate();
        hours = date.getHours();
        minutes = date.getMinutes();
        seconds = date.getSeconds();
        times = years + "-" + backTime(months) + "-" + backTime(days) + " " + backTime(hours) + ":" + backTime(minutes) + ":" + backTime(seconds);
        // 写入时间
        document.querySelector('.confirmRec span:last-child').innerHTML = "<strong>成交时间：</strong>" + times;
        // 补零
        function backTime(val){
            let result = '';
            val < 10 ? result = '0' + val : result = val;
            return result;
        }
    }
    
     //  确认货款跳转至评价商品
    $('#sureGet').on('click',() => {
        // 改变流程样式
        $('.flow b').removeClass('now');
        $('.flow b:eq(2)').text('√');
        $('.flow b:eq(3)').addClass('now');

        $('.order').css('display','none');
        $('.order:eq(3)').css('display','block');
        $(window).scrollTop(0);
    });
</script>
</body>
</html>